<template>
  <div class="prop">
    <div style="height:150px;width:calc(100% + 5px);"></div>
    <div class="warpprop" style="width:500px;height:330px;">
      <div class="propheader">
        查看
        <p class="close1" @click="closeSee" >关闭</p>
      </div>
      <div class="versions">
        <el-tabs :tab-position="'left'" :stretch="false" v-if="imgList.length == 0 ">
          <el-tab-pane label="无">
           <div style="color:black;line-height:40px;">暂无信息</div>
          </el-tab-pane>
        </el-tabs>
        <el-tabs :tab-position="'left'" :stretch="false" v-else>
          <el-tab-pane label="name" v-for="item in imgList" :key="item.id">
            <img width="100%" :src= item.file_path >
          </el-tab-pane>
        </el-tabs>
        <!-- <div class="versionsright"></div> -->
      </div>
      <div class="closesee">
        <el-button type="primary" @click="closeSee">关闭</el-button>
      </div>
    </div>
  </div>
</template>
<script>
import {
  getImg
} from '../../../api/Salesman.js';
export default {
  props: ["id"],
  data() {
    return {
      value: "",
      imgList: []
    };
  },
  created() {
    // this.value=this.val
    getImg({
      media_up_id:this.id
    }).then((res)=>{
      if (res.code == 200) {
        res.data.forEach(element => {
            element.file_path = window.location.origin + element.file_path
        });
        this.imgList = res.data
      }
    })
  },
  methods: {
      closeSee(){
          this.$emit('closeSee')
      }
  },
  watch: {}
};
</script>
<style lang="scss" scoped>
.warpprop {
  width: 600px;
  height: 450px;
  // background: blue;
  background: #fff;
  margin: 0 auto;
  border-radius: 10px;
  .contenthint1 {
    width: 95%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    .itemtow {
      display: flex;
      align-items: center;
      margin-top: 20px;
      .oneitemname {
        width: 100px;
        margin-left: 20px;
      }
    }
  }
  .selectlist {
    width: 95%;
    margin: 0 auto;
    margin-top: 20px;
  }
  .zylist {
    width: 90%;
    margin: 0 auto;
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    .zyitem {
      width: 50%;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
      .zyname {
        font-size: 14px;
        width: 90px;
      }
    }
  }
  .raidoandsave1 {
    width: 95%;
    margin: 0 auto;
    font-size: 14px;
    margin-top: 20px;
  }
  .raidoandsave {
    width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    height: 100px;
  }
  .raidoandsave2 {
    width: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    height: 100px;
  }
  .versions {
    // display: flex;
    width: 97%;
    margin: 0 auto;
    margin-top: 10px;
    // .versionsleft{
    //   flex: 1;
    // }
    /deep/ .el-tabs__nav-scroll {
      max-width: 170px;
    }
    .versionsright {
      width: 300px;
      height: 200px;
      background: red;
    }
  }
  .closesee {
    width: 50px;
    margin: 0 auto;
    margin-top: 20px;
  }
  .close1{
    cursor: pointer;
  }
}
</style>